<template>
  <view class="bag-apply-page">
    <!-- 申领说明 -->
    <view class="apply-info section">
      <view class="info-header">
        <view class="info-icon">🎒</view>
        <view class="info-title">环保袋申领</view>
      </view>
      <view class="info-content">
        <text>免费申领环保回收袋，让回收更便捷！我们将根据您的地址免费配送到家。</text>
      </view>
    </view>

    <!-- 袋子规格选择 -->
    <view class="bag-specs section">
      <view class="section-title">选择袋子规格</view>
      <view class="specs-list">
        <view 
          v-for="(spec, index) in bagSpecs" 
          :key="index"
          class="spec-item"
          :class="{ 'selected': selectedSpec === index }"
          @tap="selectSpec(index)"
        >
          <view class="spec-info">
            <view class="spec-name">{{ spec.name }}</view>
            <view class="spec-desc">{{ spec.description }}</view>
            <view class="spec-size">尺寸：{{ spec.size }}</view>
          </view>
          <view class="spec-icon">
            <text v-if="selectedSpec === index">✓</text>
          </view>
        </view>
      </view>
    </view>

    <!-- 数量选择 -->
    <view class="quantity-section section">
      <view class="section-title">申领数量</view>
      <view class="quantity-selector">
        <view class="quantity-control">
          <button class="quantity-btn" @tap="decreaseQuantity" :disabled="quantity <= 1">-</button>
          <view class="quantity-display">{{ quantity }}</view>
          <button class="quantity-btn" @tap="increaseQuantity" :disabled="quantity >= maxQuantity">+</button>
        </view>
        <view class="quantity-limit">每次最多申领{{ maxQuantity }}个</view>
      </view>
    </view>

    <!-- 收货地址 -->
    <view class="address-section section">
      <view class="section-title">收货地址</view>
      <view class="address-selector" @tap="selectAddress">
        <view v-if="selectedAddress" class="address-info">
          <view class="address-name">{{ selectedAddress.name }} {{ selectedAddress.phone }}</view>
          <view class="address-detail">{{ selectedAddress.address }}</view>
        </view>
        <view v-else class="address-placeholder">
          <text>请选择收货地址</text>
        </view>
        <view class="address-arrow">></view>
      </view>
    </view>

    <!-- 申领须知 -->
    <view class="notice-section section">
      <view class="section-title">申领须知</view>
      <view class="notice-list">
        <view class="notice-item">
          <text class="notice-dot">•</text>
          <text class="notice-text">每个用户每月可免费申领一次环保袋</text>
        </view>
        <view class="notice-item">
          <text class="notice-dot">•</text>
          <text class="notice-text">环保袋将在3-5个工作日内配送到指定地址</text>
        </view>
        <view class="notice-item">
          <text class="notice-dot">•</text>
          <text class="notice-text">请确保收货地址准确，避免配送失败</text>
        </view>
        <view class="notice-item">
          <text class="notice-dot">•</text>
          <text class="notice-text">使用环保袋回收可获得额外积分奖励</text>
        </view>
      </view>
    </view>

    <!-- 提交按钮 -->
    <view class="submit-section">
      <button 
        class="submit-btn btn-primary" 
        @tap="submitApplication"
        :disabled="!canSubmit"
      >
        立即申领
      </button>
    </view>
  </view>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'

const selectedSpec = ref(0)
const quantity = ref(1)
const maxQuantity = ref(5)
const selectedAddress = ref(null)

const bagSpecs = ref([
  {
    name: '标准环保袋',
    description: '适合日常回收使用',
    size: '40cm × 50cm'
  },
  {
    name: '大容量环保袋',
    description: '适合大件物品回收',
    size: '50cm × 60cm'
  },
  {
    name: '分类环保袋套装',
    description: '包含3个不同颜色的分类袋',
    size: '35cm × 45cm × 3个'
  }
])

const canSubmit = computed(() => {
  return selectedAddress.value !== null && quantity.value > 0
})

const selectSpec = (index) => {
  selectedSpec.value = index
}

const increaseQuantity = () => {
  if (quantity.value < maxQuantity.value) {
    quantity.value++
  }
}

const decreaseQuantity = () => {
  if (quantity.value > 1) {
    quantity.value--
  }
}

const selectAddress = () => {
  uni.navigateTo({
    url: '/pages/address/address?mode=select',
    events: {
      // 监听地址选择结果
      selectAddress: (address) => {
        selectedAddress.value = address
      }
    }
  })
}

const submitApplication = () => {
  if (!canSubmit.value) {
    uni.showToast({
      title: '请完善申领信息',
      icon: 'none'
    })
    return
  }

  uni.showModal({
    title: '确认申领',
    content: `确认申领${bagSpecs.value[selectedSpec.value].name} ${quantity.value}个？`,
    success: (res) => {
      if (res.confirm) {
        // 提交申领请求
        uni.showLoading({
          title: '提交中...'
        })
        
        setTimeout(() => {
          uni.hideLoading()
          uni.showToast({
            title: '申领成功！',
            icon: 'success'
          })
          
          // 跳转到订单页面
          setTimeout(() => {
            uni.navigateTo({
              url: '/pages/orders/orders?type=bag'
            })
          }, 1500)
        }, 2000)
      }
    }
  })
}

onMounted(() => {
  // 获取默认地址
  // 这里可以调用API获取用户的默认地址
  selectedAddress.value = {
    name: '张三',
    phone: '138****8888',
    address: '北京市朝阳区某某街道某某小区1号楼101室'
  }
})
</script>

<style lang="scss" scoped>
.bag-apply-page {
  min-height: 100vh;
  background: var(--bg-color);
  padding: 32rpx;
  padding-bottom: 200rpx;
}

.apply-info {
  text-align: center;
  padding: 48rpx 32rpx;
}

.info-header {
  margin-bottom: 24rpx;
}

.info-icon {
  font-size: 80rpx;
  margin-bottom: 16rpx;
}

.info-title {
  font-size: 36rpx;
  font-weight: bold;
  color: var(--text-color);
}

.info-content {
  font-size: 28rpx;
  color: var(--text-light);
  line-height: 1.6;
}

.section-title {
  font-size: 32rpx;
  font-weight: 600;
  color: var(--text-color);
  margin-bottom: 24rpx;
}

.specs-list {
  .spec-item {
    display: flex;
    align-items: center;
    padding: 24rpx;
    border: 2rpx solid var(--border-color);
    border-radius: 12rpx;
    margin-bottom: 16rpx;
    transition: all 0.3s ease;
    
    &.selected {
      border-color: var(--primary-color);
      background: rgba(139, 195, 74, 0.1);
    }
  }
  
  .spec-info {
    flex: 1;
  }
  
  .spec-name {
    font-size: 32rpx;
    font-weight: 600;
    color: var(--text-color);
    margin-bottom: 8rpx;
  }
  
  .spec-desc {
    font-size: 26rpx;
    color: var(--text-light);
    margin-bottom: 4rpx;
  }
  
  .spec-size {
    font-size: 24rpx;
    color: var(--text-lighter);
  }
  
  .spec-icon {
    width: 48rpx;
    height: 48rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 32rpx;
    color: var(--primary-color);
    font-weight: bold;
  }
}

.quantity-selector {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.quantity-control {
  display: flex;
  align-items: center;
  border: 2rpx solid var(--border-color);
  border-radius: 8rpx;
  overflow: hidden;
}

.quantity-btn {
  width: 80rpx;
  height: 80rpx;
  background: var(--bg-color);
  border: none;
  font-size: 36rpx;
  font-weight: bold;
  color: var(--text-color);
  
  &:disabled {
    color: var(--text-lighter);
    background: #f0f0f0;
  }
}

.quantity-display {
  width: 120rpx;
  height: 80rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32rpx;
  font-weight: 600;
  background: white;
}

.quantity-limit {
  font-size: 24rpx;
  color: var(--text-lighter);
}

.address-selector {
  display: flex;
  align-items: center;
  padding: 32rpx 24rpx;
  border: 2rpx solid var(--border-color);
  border-radius: 12rpx;
  background: white;
}

.address-info {
  flex: 1;
}

.address-name {
  font-size: 32rpx;
  font-weight: 600;
  color: var(--text-color);
  margin-bottom: 8rpx;
}

.address-detail {
  font-size: 28rpx;
  color: var(--text-light);
  line-height: 1.4;
}

.address-placeholder {
  flex: 1;
  font-size: 32rpx;
  color: var(--text-lighter);
}

.address-arrow {
  font-size: 32rpx;
  color: var(--text-lighter);
}

.notice-list {
  .notice-item {
    display: flex;
    align-items: flex-start;
    margin-bottom: 16rpx;
  }
  
  .notice-dot {
    color: var(--primary-color);
    font-weight: bold;
    margin-right: 12rpx;
    margin-top: 4rpx;
  }
  
  .notice-text {
    flex: 1;
    font-size: 28rpx;
    color: var(--text-light);
    line-height: 1.5;
  }
}

.submit-section {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 32rpx;
  background: white;
  border-top: 2rpx solid var(--border-color);
  padding-bottom: calc(32rpx + env(safe-area-inset-bottom));
}

.submit-btn {
  width: 100%;
  font-size: 36rpx;
  
  &:disabled {
    background: var(--text-lighter);
    color: white;
  }
}
</style>